<template>
	<el-form :model="localModel" :inline="true" class="flex flex-wrap items-center justify-start">
		<div class="flex flex-wrap items-center justify-between">
			<template v-for="(field, index) in fields" :key="index">
				<el-form-item :label="field.label" label-width="auto" :class="field.class">
					<template v-if="field.component === 'el-date-picker1'">
						<div class="date-time-wrapper">
							<el-date-picker v-model="localModel[field.name[0]]" :type="field.type"
								valueFormat="YYYY-MM-DD" :placeholder="field.placeholder[0]" :class="field.class" />
							<div class="separator">-</div>
							<el-date-picker v-model="localModel[field.name[1]]" :placeholder="field.placeholder[1]"
								valueFormat="YYYY-MM-DD" :type="field.type" :class="field.class" />
						</div>
					</template>
					<el-date-picker v-if="field.component === 'el-date-picker'" v-model="localModel[field.name]"
						:placeholder="field.placeholder" :type="field.type" :format="field.format"
						:value-format="field.valueFormat" />
					<el-input v-if="field.component === 'input'" v-model="localModel[field.name]" @keydown.enter="onSearchClick"
						:placeholder="field.placeholder" clearable style="width: 200px" />
					<!-- 使用el-select来包裹所有的el-option -->
					<el-select v-if="field.component === 'el-select'" v-model="localModel[field.name]"
						:placeholder="field.placeholder" @change="handleChange(field)">
						<el-option v-for="item in field.options" :key="item[field.value]"
							:label="item[field.labelValue]" :value="item[field.value]" />
					</el-select>
				</el-form-item>
			</template>
			<el-form-item class="selButton">
				<el-button :icon="Search" type="primary" @click="onSearchClick">查询</el-button>
				<el-button class="refreshBtn" :icon="Refresh" @click="reSearchClick">重置</el-button>
			</el-form-item>
		</div>
	</el-form>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Refresh, Search } from '@element-plus/icons-vue';

interface Field {
	label: string;
	component: string;
	name: string | [string, string];
	placeholder: string | [string, string];
	type?: string;
	format?: string;
	valueFormat?: string;
	options?: any[];
	class?: string;
	labelValue?: string;
	value?: string;
	change?: (value: any) => void;
}

const props = defineProps<{
	modelValue: Record<string, any>;
	fields: Field[];
	handleSearch: (model: Record<string, any>) => void;
}>();

const emit = defineEmits(['update:modelValue']);

const localModel = ref(props.modelValue);

watch(localModel, (newValue) => {
	emit('update:modelValue', newValue);
}, { deep: true });

function onSearchClick() {
	console.log(props, 'props');
	props.handleSearch(localModel.value);
}

function reSearchClick() {
  // 遍历所有配置字段，设置为 undefined
  props.fields.forEach(field => {
    if (Array.isArray(field.name)) { // 处理日期范围类字段
      field.name.forEach(name => {
        if (localModel.value[name] !== undefined) {
          delete localModel.value[name]
        }
      })
    } else { // 常规字段
      if (localModel.value[field.name] !== undefined) {
        delete localModel.value[field.name]
      }
    }
  })

  // 清理其他可能存在的非配置字段
  Object.keys(localModel.value).forEach(key => {
    if (!props.fields.some(field =>
        Array.isArray(field.name) ? field.name.includes(key) : field.name === key
    )) {
      delete localModel.value[key]
    }
  })

  // 触发更新和搜索
  emit('update:modelValue', localModel.value)
  onSearchClick()
}

function handleChange(field: Field) {
	if (field.change) {
		field.change(localModel.value[field.name]);
	}
}
</script>
<style scoped>
/* 基本的flex布局，确保内容可以换行 */
.flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* 垂直居中 */
}

/* 使得时间框和日期框更加对称 */
.el-date-picker,
.el-time-picker {
	width: calc(50% - 10px);
	/* 减去一些间距 */
}

.el-col:not(:first-child) {
	margin-left: 10px;
	/* 第一个el-col不需要左边距 */
}

/* 使得'-'分隔符居中显示 */
.text-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 查询按钮样式，并放置在最左侧 */
.selButton {
	margin-left: auto;
	/* 原本是为了右对齐，但在这里我们不需要 */
	margin-right: 10px;
	/* 右侧留一些间距 */
	width: auto;
	/* 宽度自适应 */
}

/* 如果有需要，可以调整el-form-item的样式，但通常不需要直接修改 */
.el-form-item {
	/* 如果需要标签水平居中（不推荐），可以尝试以下样式，但请注意这可能会破坏布局 */
	/* display: flex;
	justify-content: center;
	align-items: center; */

	/* 更常见的做法是保持默认布局，或者通过调整内部元素来微调 */
}

/* 最后一个flex容器（查询按钮所在的div），确保它位于最左侧 */
.flex.items-center:last-child {
	justify-content: flex-start;
}

.date-time-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.date-time-wrapper .el-date-picker,
.date-time-wrapper .el-time-picker {
	width: calc(50% - 5px);
	/* 减去一些间距，确保它们不会溢出容器 */
}

.date-time-wrapper .separator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	/* 或者您希望的其他宽度 */
	height: 100%;
	/* 确保分隔符与选择器高度一致 */
	padding: 0 10px;
}

:deep(.el-form-item__label) {
	line-height: 1 !important;
	align-items: center;
}
</style>
